<template>
  <el-form ref="surgeryForm" :model="form" label-width="120px" class="surgery-form" :rules="rules">
    <!-- 手术操作表格 -->
    <el-table
      :data="form.surgeryList"
      border
      style="width: 100%; margin-bottom: 20px"
      :header-cell-style="{ background: '#f5f7fa', color: '#666' }"
    >
      <el-table-column prop="operationDate" label="手术及操作日期" align="center">
        <template #default="scope">
          <el-form-item :prop="`surgeryList.${scope.$index}.operationDate`">
            <el-date-picker
              v-model="scope.row.operationDate"
              type="date"
              format="YYYY-MM-DD"
              placeholder="选择日期"
              clearable
            />
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column prop="operationName" label="手术及操作名称" align="center">
        <template #default="scope">
          <el-form-item :prop="`surgeryList.${scope.$index}.operationName`">
            <el-input v-model="scope.row.operationName" placeholder="输入手术名称" clearable />
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column prop="operationLevel" label="手术级别" align="center">
        <template #default="scope">
          <el-form-item :prop="`surgeryList.${scope.$index}.operationLevel`">
            <el-input v-model="scope.row.operationLevel" placeholder="输入手术级别" clearable />
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column label="手术及其操作" align="center">
        <el-table-column prop="surgeon" label="术者" align="center">
          <template #default="scope">
            <el-form-item :prop="`surgeryList.${scope.$index}.surgeon`">
              <el-input v-model="scope.row.surgeon" placeholder="输入术者" clearable />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="assistant1" label="I助" align="center">
          <template #default="scope">
            <el-form-item :prop="`surgeryList.${scope.$index}.assistant1`">
              <el-input v-model="scope.row.assistant1" placeholder="输入I助" clearable />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="assistant2" label="II助" align="center">
          <template #default="scope">
            <el-form-item :prop="`surgeryList.${scope.$index}.assistant2`">
              <el-input v-model="scope.row.assistant2" placeholder="输入II助" clearable />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column prop="incisionHealing" label="切口愈合" align="center">
        <template #default="scope">
          <el-form-item :prop="`surgeryList.${scope.$index}.incisionHealing`">
            <el-input v-model="scope.row.incisionHealing" placeholder="输入愈合情况" clearable />
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column prop="electiveSurgery" label="择期手术" align="center">
        <template #default="scope">
          <el-form-item :prop="`surgeryList.${scope.$index}.electiveSurgery`">
            <el-select v-model="scope.row.electiveSurgery" placeholder="选择是否择期" clearable>
              <el-option label="是" value="是" />
              <el-option label="否" value="否" />
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column prop="anesthesiaMethod" label="麻醉方式" align="center">
        <template #default="scope">
          <el-form-item :prop="`surgeryList.${scope.$index}.anesthesiaMethod`">
            <el-input v-model="scope.row.anesthesiaMethod" placeholder="输入麻醉方式" clearable />
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column prop="anesthesiologist" label="麻醉医师" align="center">
        <template #default="scope">
          <el-form-item :prop="`surgeryList.${scope.$index}.anesthesiologist`">
            <el-input v-model="scope.row.anesthesiologist" placeholder="输入麻醉医师" clearable />
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column prop="operationCode" label="手术及操作编码" align="center">
        <template #default="scope">
          <el-form-item :prop="`surgeryList.${scope.$index}.operationCode`">
            <el-input v-model="scope.row.operationCode" placeholder="输入操作编码" clearable />
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>

    <!-- 操作按钮 -->
    <div style="text-align: right">
      <el-button type="primary" @click="handleSubmit"> 提交 </el-button>
      <el-button @click="handleReset"> 重置 </el-button>
    </div>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElInput,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElButton,
  FormRules
} from 'element-plus'

// 表单数据结构
const form = reactive({
  surgeryList: [
    {
      operationDate: '2024-05-28',
      operationName: '呼吸机治疗[大于等于96小时]',
      operationLevel: '一级',
      surgeon: '李闪闪',
      assistant1: '-',
      assistant2: '-',
      incisionHealing: '0类/其他',
      electiveSurgery: '否',
      anesthesiaMethod: '静脉麻醉',
      anesthesiologist: '李闪闪',
      operationCode: '96.7201'
    },
    {
      operationDate: '2024-06-03',
      operationName: '开胸探查术',
      operationLevel: '三级',
      surgeon: '涂星强',
      assistant1: '刘楠',
      assistant2: '-',
      incisionHealing: 'I/其他',
      electiveSurgery: '否',
      anesthesiaMethod: '全身麻醉',
      anesthesiologist: '罗君生',
      operationCode: '34.0200x001'
    },
    {
      operationDate: '2024-06-03',
      operationName: '胸壁血管结扎术',
      operationLevel: '一级',
      surgeon: '涂星强',
      assistant1: '刘楠',
      assistant2: '-',
      incisionHealing: 'I/其他',
      electiveSurgery: '否',
      anesthesiaMethod: '全身麻醉',
      anesthesiologist: '罗君生',
      operationCode: '38.8500x010'
    }
  ]
})

// 表单校验规则
const rules =
  reactive <
  FormRules >
  {
    // 手术列表校验（可扩展）
    surgeryList: [
      {
        validator: (rule, value, callback) => {
          if (value.some((item) => !item.operationName.trim())) {
            callback(new Error('手术及操作名称不能为空'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]
  }

// 表单引用
const surgeryForm = ref()

// 提交表单
const handleSubmit = () => {
  surgeryForm.value?.validate((valid) => {
    if (valid) {
      // 这里可替换为实际的接口请求
      console.log('表单校验通过，提交数据：', form)
      // 示例：axios.post('/api/submit-surgery', form)
    } else {
      console.log('表单校验失败')
    }
  })
}

// 重置表单
const handleReset = () => {
  surgeryForm.value?.resetFields()
  // 重置日期选择器（如果需要恢复初始值）
  form.surgeryList.forEach((item) => {
    item.operationDate = ''
  })
}
</script>

<style scoped>
.surgery-form {
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-table {
  --el-table-header-text-color: #666;
}

.el-table th {
  background-color: #f5f7fa !important;
}
</style>
